<template>
    <div class="contact_input_container">
        <el-input class="input_el" v-model="name" placeholder="您的姓名"/>
        <el-input class="input_el" v-model="email" placeholder="您的邮箱"/>
        <el-input class="input_el" v-model="mobile" placeholder="您的电话"/>
        <el-input
                class="input_el"
                type="textarea"
                :rows="3"
                :autosize=false
                resize="none"
                placeholder="请输入内容"
                v-model="textarea">
        </el-input>
        <div class="submit_wrapper">
            <el-button class="submit_btn" type="primary">发送</el-button>
        </div>

    </div>
</template>

<script>
    export default {
        methods: {
        },
        data() {
            return {
                name: '',
                email: '',
                mobile: '',
                textarea: ''
            }
        }
    }
</script>

<style lang="scss">

    .contact_input_container{
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        background-color: white;
        padding: 0px 48px;

        .input_el{
            margin-bottom: 15px;
            max-width: 560px;
        }

        .submit_wrapper{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .submit_btn{
            margin-top: 22px;
            min-width: 120px;
            font-size: $fz14;
        }
    }


    @media screen and(max-width: $mobile_width) {
        .contact_input_container{
            padding: 0px 48px;
            display: flex;
            flex: 1;
            flex-direction: column;
        }

        .submit_btn{
            min-width: 120px;
            min-height: 30px;
        }
    }

</style>
